$(function () {
  const layer = layui.layer
  const form = layui.form

  initCate()
  //获取下拉框文档
  function initCate() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        console.log(res)
        if (res.status !== 0) return layer.msg('获取失败')
        let htmlStr = template('tpl-cate', res)
        $('#tplCate').html(htmlStr)

        form.render()
      },
    })
  }

  //调用 initEditor()方法初始化富文本
  initEditor()

  // 1. 初始化图片裁剪器
  var $image = $('#image')
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview',
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  //点击选择封面按钮，唤起文件上传的点击事件
  $('#chooserImage').on('click', function () {
    $('#coverFile').click()
  })

  $('#coverFile').on('change', function (e) {
    //获取文件 e.target.files
    let files = e.target.files
    if (files === 0) return console.log('当前没有选择图片')

    //根据选择的图片文件，创建对应图片的 url地址
    let imgURL = URL.createObjectURL(files[0])

    //为裁剪区重新设置一下图片
    $image.cropper('destroy').attr('src', imgURL).cropper(options)
  })

  //定义文章的发布状态，点击草稿按钮之后，绑定点击事件，修改文章状态
  //默认文章状态  已发布
  let art_state = '已发布'
  //点击存为操作 切换状态为 草稿
  $('#btnSave').on('click', function () {
    art_state = '草稿'
  })

  $('#formPub').on('submit', function (e) {
    e.preventDefault()
    //创建一个FormData对象
    let fd = new FormData($(this)[0])

    //把当前状态，添加到FormData中区
    fd.append('state', art_state)

    //将封面裁剪过后的图片输出为一个文件对象
    $image
      .cropper('getCroppedCanvas', {
        //创建一个画布
        width: 400,
        height: 280,
      })
      .toBlob(function (blob) {
        //将Canvas画布上的内容转化为文件对象
        //得到文件对象后，进行后续操作
        //5.将文件对象存储到fd中
        fd.append('cover_img', blob)
        //发布文章的请求需要 写在 toBlob回调中，因为这里可以取到blob的值
        publishArt(fd)
      })
    console.log(fd.get('cover_img'))
  })

  //定义发布文章的ajax请求方式
  function publishArt(f) {
    $.ajax({
      method: 'POST',
      url: '/my/article/add',
      data: f,
      //如果向接口发送的数据是 ForData 格式的，必须添加一下两个属性
      contentType: false,
      processData: false,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('发布失败！')
        }
        layer.msg('发布成功')

        //发布成功跳转到文章页面
        location.href = '/article/art_list.html'

        //通过添加类名修改当前dd的样式
        $('.layui-nav-child dd:nth-child(2)', window.parent.document)
          .addClass('layui-this')
          .siblings()
          .removeClass('layui-this')
      },
    })
  }
})
